<template>
  <view class="container">
    <view class="main">
      <view class="nav">
        <view class="header">
          <view class="left" v-if="orderType == 'takein'">
            <view class="store-name">
              <text>深圳市教育路大学店</text>
              <view class="iconfont iconarrow-right"></view>
            </view>
            <view class="store-location">
              <up-icon name="map"></up-icon>
              <text>距离您 1.0km</text>
            </view>
          </view>
          <view class="left overflow-hidden" v-else>
            <view class="d-flex align-items-center overflow-hidden">
              <image
                src="/static/images/order/location.png"
                style="width: 30rpx; height: 30rpx"
                class="mr-10"
              ></image>
              <view
                class="font-size-extra-lg text-color-base font-weight-bold text-truncate"
              >
                {{ "东门老街店铺" }}
              </view>
            </view>
            <view
              class="font-size-sm text-color-assist overflow-hidden text-truncate"
            >
              由<text class="text-color-base" style="margin: 0 10rpx">{{
                "观澜店"
              }}</text
              >配送
            </view>
          </view>
          <view class="right">
            <view
              class="dinein"
              :class="{ active: orderType == 'takein' }"
              @tap="SET_ORDER_TYPE('takein')"
            >
              <text>自取</text>
            </view>
            <view
              class="takeout"
              :class="{ active: orderType == 'takeout' }"
              @tap="takout"
            >
              <text>外卖</text>
            </view>
          </view>
        </view>
        <view class="coupon">
          <text class="title">"霸气mini卡"超级购券活动，赶紧去购买</text>
          <up-icon name="arrow-right" color="#f0ad4e"></up-icon>
        </view>
      </view>
      <view class="u-menu-wrap content">
        <scroll-view
          scroll-y
          scroll-with-animation
          class="u-tab-view menu-scroll-view"
          :scroll-top="scrollTop"
          :scroll-into-view="itemId"
        >
          <view
            v-for="(item, index) in tabbar"
            :key="index"
            class="u-tab-item"
            :class="[current == index ? 'u-tab-item-active' : '']"
            @tap.stop="swichMenu(index)"
          >
            <text class="u-line-1">{{ item.name }}</text>
          </view>
        </scroll-view>

        <scroll-view
          :scroll-top="scrollRightTop"
          scroll-y
          scroll-with-animation
          class="right-box goods"
          @scroll="rightScroll"
        >
          <view class="page-view wrapper">
            <swiper
              class="ads"
              id="ads"
              autoplay
              :interval="3000"
              indicator-dots
            >
              <swiper-item v-for="(item, index) in ads" :key="index">
                <image :src="item.image"></image>
              </swiper-item>
            </swiper>

            <view class="list">
              <view
                class="class-item category"
                :id="'item' + index"
                v-for="(item, index) in tabbar"
                :key="index"
              >
                <!-- <view class="item-title">
						<text>{{ item.name }}</text>
					</view> -->
                <view class="title">
                  <text>{{ item.name }}</text>
                  <image :src="item.icon" class="icon"></image>
                </view>
                <view class="item-container items">
                  <view
                    class="thumb-box good"
                    v-for="(good, index1) in item.goods_list"
                    :key="index1"
                    @click="toDetail(good)"
                  >
                    <image :src="good.images" class="image"></image>
                    <view class="right">
                      <text class="name">{{ good.name }}</text>
                      <text class="tips">{{ good.content }}</text>
                      <view class="price_and_action">
                        <text class="price">￥{{ good.price || 12.0 }}</text>
                        <view class="btn-group" v-if="good.use_property">
                          <up-button
                            type="warning"
                            class="btn property_btn"
                            hover-class="none"
                            size="mini"
                            bgColor="#f0ad4e"
                            @click="showGoodDetailModal(item, good)"
                          >
                            选规格
                          </up-button>
                          <view class="dot" v-show="goodCartNum(good.id)">{{
                            goodCartNum(good.id)
                          }}</view>
                        </view>
                        <view class="btn-group" v-else>
                          <up-button
                            type="default"
                            v-show="goodCartNum(good.id)"
                            plain
                            class="btn reduce_btn"
                            size="mini"
                            hover-class="none"
                            @tap="handleReduceFromCart(item, good)"
                          >
                            <view class="iconfont iconsami-select"></view>
                          </up-button>
                          <view class="number" v-show="goodCartNum(good.id)">{{
                            goodCartNum(good.id)
                          }}</view>
                          <view
                            class="btn add_btn"
                            size="min"
                            hover-class="none"
                            @tap="handleAddToCart(item, good, 1)"
                          >
                            <up-icon
                              size="30"
                              name="plus-circle-fill"
                              color="#f0ad4e"
                              class="iconfont iconadd-select"
                            ></up-icon>

                            <!-- <view class="iconfont iconadd-select"></view> -->
                          </view>
                        </view>
                      </view>
                    </view>

                    <!-- <image
							class="item-menu-image"
							:src="item1.coverImgUrl"
							mode=""
						></image>
						<view class="item-menu-name">{{ item1.name }}</view>
						-->
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 购物车栏 begin -->
    <view class="cart-box">
      <view class="mark">
        <!-- <image src="/static/images/menu/cart.png" class="cart-img" @tap="openCartPopup"></image>
					 -->
        <uni-icons
          type="cart-filled"
          color="#f0ad4e"
          size="50"
          class="cart-img"
          @tap="openCartPopup"
        ></uni-icons>
        <view class="tag">1</view>
      </view>
      <view class="price">
        <u-text text="￥12.00" margin="10rpx 20rpx"></u-text>
      </view>
      <u-button
        type="warning"
        class="pay-btn"
        @tap="toPay"
        :disabled="disabledPay"
      >
        <!-- {{ `差3元起送` ||'去结算' }} -->
        去结算
      </u-button>
    </view>
    <!-- 购物车栏 end -->

    <!-- 商品详情模态框 begin -->
    <u-modal
      :show="goodDetailModalVisible"
      class="good-detail-modal"
      color="#5A5B5C"
      width="650rpx"
      custom
      padding="0rpx"
      radius="12rpx"
      @confirm="handleAddToCartInModal"
      confirmText="加入购物车"
      confirmColor="#f0ad4e"
    >
      <view class="modal-content">
        <view class="cover">
          <u-image
            width="260rpx"
            height="260rpx"
            :src="good.images"
            class="image"
          ></u-image>
          <view class="btn-group">
            <up-icon
              @click="closeGoodDetailModal"
              name="close"
              color="#2979ff"
              size="28"
            ></up-icon>
          </view>
        </view>
        <scroll-view class="detail" scroll-y>
          <view class="wrapper">
            <view class="basic">
              <view class="name">{{ good.name || "珍珠奶茶" }}</view>
              <view class="tips">{{
                good.content || "珍珠+奶茶美味好喝"
              }}</view>
            </view>
            <view class="properties">
              <view
                class="property"
                v-for="(item, index) in good.property"
                :key="index"
              >
                <view class="title">
                  <text class="name">{{ item.name || "多糖" }}</text>
                  <view class="desc" v-if="item.desc"
                    >({{ item.desc || "标题" }})</view
                  >
                </view>
                <view class="values">
                  <view
                    class="value"
                    v-for="(value, key) in item.values"
                    :key="key"
                    :class="{ default: value.is_default }"
                    @tap="changePropertyDefault(index, key)"
                  >
                    {{ value.value }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="action">
          <view class="left">
            <view class="price">￥{{ 12.0 }}</view>
            <view class="props"> 多糖，少冰 </view>
            <!-- <view class="props" v-if="getGoodSelectedProps(good)">
            {{ getGoodSelectedProps(good) }}11
          </view> -->
          </view>
          <view class="btn-group">
            <up-icon
              @click="handlePropertyReduce"
              name="minus-circle"
              size="20"
              color="#999"
            ></up-icon>
            <view class="number">10</view>
            <up-icon
              name="plus-circle-fill"
              size="20"
              color="#f0ad4e"
              @click="handlePropertyAdd"
            ></up-icon>
            <!-- <button
            type="default"
            plain
            class="btn"
            size="mini"
            hover-class="none"
            @tap="handlePropertyReduce"
          >
            <view class="iconfont iconsami-select"></view>
          </button>
          <view class="number">{{ good.number||1 }}</view>
          <button
            type="primary"
            class="btn"
            size="min"
            hover-class="none"
            @tap="handlePropertyAdd"
          >
            <view class="iconfont iconadd-select"></view>
          </button> -->
          </view>
        </view>
        <!-- <view class="add-to-cart-btn" @tap="handleAddToCartInModal">
        <view>加入购物车</view>
      </view> -->
      </view>
    </u-modal>
    <!-- 商品详情模态框 end -->

    <!-- 购物车详情popup -->
    <up-popup
      mode="bottom"
      @close="cartPopupVisible = false"
      :show="cartPopupVisible"
      class="cart-popup"
    >
      <view class="top">
        <u-text
          @tap="handleCartClear"
          color="#fff"
          text="清空"
          align="right"
        ></u-text>
      </view>
      <scroll-view class="cart-list" scroll-y>
        <view class="wrapper">
          <view class="item" v-for="(item, index) in 10" :key="index">
            <view class="left">
              <view class="name">{{ item.name || "珍珠奶茶" }}</view>
              <view class="props">{{ item.props_text || "标准冰" }}</view>
            </view>
            <view class="center">
              <text>￥{{ item.price || "12.00" }}</text>
            </view>
            <view class="right">
              <!-- <view  class="btn no-active-btn" 
									@tap="handleCartItemReduce(index)">
									<view class="iconfont iconsami-select"></view>
								</view> -->
              <up-icon name="minus-circle" size="20" color="#999"></up-icon>
              <view class="number">{{ item.number || 1 }}</view>
              <up-icon
                name="plus-circle-fill"
                size="20"
                color="#f0ad4e"
              ></up-icon>
              <!-- <view  class="btn active-btn"
									@tap="handleCartItemAdd(index)">
									<view class="iconfont iconadd-select"></view>
								</view> -->
            </view>
          </view>
          <view class="item" v-if="orderType == 'takeout' && store.packing_fee">
            <view class="left">
              <view class="name">包装费</view>
            </view>
            <view class="center">
              <text>￥12.00 }}</text>
            </view>
            <view class="right invisible">
              <view
                plain
                size="mini"
                class="btn no-active-btn"
                hover-class="none"
              >
                <view class="iconfont iconsami-select"></view>
              </view>
              <view class="number">1</view>
              <view class="btn active-btn" size="min" hover-class="none">
                <view class="iconfont iconadd-select"></view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </up-popup>
    <!-- 购物车详情popup -->
  </view>
</template>
<script lang="ts" setup>
import {
  reactive,
  toRefs,
  ref,
  onMounted,
  defineComponent,
  nextTick,
  computed,
} from "vue";
const cart = ref([{ id: 1 }]);
const openCartPopup = () => {
  cartPopupVisible.value = true;
};
//计算单个饮品添加到购物车的数量
const goodCartNum = computed(() => {
  return (id: string) =>
    cart.value.reduce((acc, cur) => {
      if (cur.id === id) {
        return (acc += cur.number);
      }
      return acc;
    }, 0);
});
const menuCartNum = computed(() => {
  return (id: string) =>
    cart.value.reduce((acc, cur) => {
      if (cur.cate_id === id) {
        return (acc += cur.number);
      }
      return acc;
    }, 0);
});
//计算购物车总数
const getCartGoodsNumber = computed(() => {
  return 0;
  //return cart.reduce((acc, cur) => acc + cur.number, 0)
});
const getCartGoodsPrice = computed(() => {
  return 0;
  //计算购物车总价
  //return cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
});
const disabledPay = computed(() => {
  return 0;
  //return orderType == 'takeout' && (getCartGoodsPrice < this.store.min_price) ? true : false
}); //是否达到起送价

const spread = computed(() => {
  return 0;
  //差多少元起送
  if (orderType != "takeout") return;
  //return parseFloat((this.store.min_price - this.getCartGoodsPrice).toFixed(2))
});

const ads = ref([
  {
    image:
      "https://images.qmai.cn/s23107/2020/05/08/c25de6ef72d2890630.png?imageView2/2/w/600/h/600",
  },

  {
    image:
      "https://images.qmai.cn/s23107/2020/04/30/b3af19e0de8ed42f61.jpg?imageView2/2/w/600/h/600",
  },
  {
    image:
      "https://img-shop.qmimg.cn/s23107/2020/04/17/8aeb78516d63864420.jpg?imageView2/2/w/600/h/600",
  },
]);
const orderType = ref("takein");
const tabbar = ref([
  {
    sort: 1,
    icon: "",
    id: 6905,
    goods_list: [
      {
        sell_time_status: 0,
        id: 65825,
        is_sell: true,
        pack_cost: "0.00",
        sales: 487,
        goods_type: 1,
        cover_img: "",
        property: [],
        goods_meals_info: [],
        is_add: 1,
        use_spec: false,
        entity: [
          {
            spec_id: "",
            trade_mark: "11110090",
            id: "9ad36aa96636c246",
            stock: "9999956.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/19/fda6dd99c83af02353.jpg",
            num: 1,
            price: 18.5,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 99,
        price: 18.5,
        unit: "件",
        imageArr: [
          "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/600/h/600",
        ],
        membership_price: 0,
        use_property: 10,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "购买三明治,享早餐指定饮品半价",
        is_follow_suit: 1,
        stock: "9999956.00",
        type: 2,
        is_label: 0,
        name: "早餐",
        images:
          "https://img-shop.qmimg.cn/s23107/2020/04/19/fda6dd99c83af02353.jpg?imageView2/2/w/400/h/400",
      },
    ],
    name: "早餐",
    is_show_backstage: 0,
  },

  {
    sort: 2,
    icon: "https://img-shop.qmimg.cn/s23107/2019/04/30/458c5a14fb2f190f96.png?imageView2/0/w/200/h/200",
    id: 6208,
    goods_list: [
      {
        sell_time_status: 0,
        id: 24516,
        pack_cost: "0.00",
        sales: 1278,
        cover_img: "",
        property: [],
        is_sell: true,
        goods_type: 1,
        entity: [
          {
            spec_id: "",
            trade_mark: "1212000070",
            id: "5d79de67251ea00e",
            stock: "10485.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/29/4a62ee45dd527609ed.jpg",
            num: 1,
            price: 18,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 3,
        price: 18,
        unit: "件",
        imageArr: [
          "https://img-shop.qmimg.cn/s23107/2020/04/29/4a62ee45dd527609ed.jpg?imageView2/2/w/600/h/600",
        ],
        membership_price: 0,
        use_property: 0,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "酥软口感,进口奶油搭配特制巧克力内馅",
        use_spec: false,
        stock: "10485.00",
        type: 1,
        is_label: 0,
        name: "脏脏王",
        images:
          "https://img-shop.qmimg.cn/s23107/2020/04/29/4a62ee45dd527609ed.jpg?imageView2/2/w/400/h/400",
      },
      {
        sell_time_status: 0,
        id: 24517,
        pack_cost: "0.00",
        sales: 1228,
        cover_img: "",
        property: [],
        is_sell: true,
        goods_type: 1,
        entity: [
          {
            spec_id: "",
            trade_mark: "1212000071",
            id: "2b3f1ea3ecabd22e",
            stock: "10308.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/29/99daa7b20061efab10.jpg",
            num: 1,
            price: 18,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 4,
        price: 18,
        unit: "件",
        imageArr: [
          "https://img-shop.qmimg.cn/s23107/2020/04/29/99daa7b20061efab10.jpg?imageView2/2/w/600/h/600",
        ],
        membership_price: 0,
        use_property: 0,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "精选北川半兵卫抹茶粉和秘制红豆泥",
        use_spec: false,
        stock: "10308.00",
        type: 1,
        is_label: 0,
        name: "抹茶王",
        images:
          "https://img-shop.qmimg.cn/s23107/2020/04/29/99daa7b20061efab10.jpg?imageView2/2/w/400/h/400",
      },
      {
        sell_time_status: 0,
        id: 68339,
        pack_cost: "0.00",
        sales: 44429,
        cover_img: "",
        property: [
          {
            is_open_checkbox: false,
            id: 190,
            values: [
              {
                is_default: 1,
                id: 582,
                code: "Z5EA54C3D0E4279185",
                value: "标准冰",
              },
              {
                is_default: 0,
                id: 583,
                code: "Z5EA54C3D0E9682750",
                value: "去冰",
              },
            ],
            name: "温度",
            desc: null,
          },
          {
            is_open_checkbox: false,
            id: 191,
            values: [
              {
                is_default: 1,
                id: 585,
                code: "Z5EA54C3D0F2A37322",
                value: "标准糖",
              },
              {
                is_default: 0,
                id: 586,
                code: "Z5EA54C3D0F70A1000",
                value: "少糖",
              },
              {
                is_default: 0,
                id: 1959,
                code: "Z5EA54C3D0FAFE7320",
                value: "不另外加糖",
              },
            ],
            name: "糖度",
            desc: null,
          },
        ],
        is_sell: true,
        goods_type: 2,
        entity: [
          {
            spec_id: "",
            trade_mark: "1010010025",
            id: "72cf1279c0a422ce",
            stock: "9999817.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/26/559a075d81060b23c7.jpg",
            num: 1,
            price: 30,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 0,
        price: 30,
        unit: "件",
        imageArr: [
          "https://img-shop.qmimg.cn/s23107/2020/04/26/559a075d81060b23c7.jpg?imageView2/2/w/600/h/600",
        ],
        membership_price: 0,
        use_property: 1,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "饱满大颗的新鲜杨梅,满杯手工去核,搭配茉莉初雪茶底,清爽多汁",
        use_spec: false,
        stock: "9999817.00",
        type: 1,
        is_label: 0,
        name: "霸气杨梅",
        images:
          "https://img1.baidu.com/it/u=1047945906,2612051836&fm=253&fmt=auto&app=138&f=JPEG?w=813&h=500",
      },
      {
        sell_time_status: 0,
        id: 68345,
        pack_cost: "0.00",
        sales: 16322,
        cover_img: "",
        property: [
          {
            is_open_checkbox: false,
            id: 190,
            values: [
              {
                is_default: 1,
                id: 582,
                code: "Z5EA55088766CC7824",
                value: "标准冰",
              },
              {
                is_default: 0,
                id: 583,
                code: "Z5EA5508876F271659",
                value: "去冰",
              },
            ],
            name: "温度",
            desc: null,
          },
          {
            is_open_checkbox: false,
            id: 191,
            values: [
              {
                is_default: 1,
                id: 585,
                code: "Z5EA55088776843559",
                value: "标准糖",
              },
              {
                is_default: 0,
                id: 586,
                code: "Z5EA5508877A528469",
                value: "少糖",
              },
              {
                is_default: 0,
                id: 1959,
                code: "Z5EA5508877E5A6908",
                value: "不另外加糖",
              },
            ],
            name: "糖度",
            desc: null,
          },
        ],
        is_sell: true,
        goods_type: 2,
        entity: [
          {
            spec_id: "",
            trade_mark: "1010010043",
            id: "c7c6f8fd34040338",
            stock: "999950.00",
            spec_text: [],
            spec: [],
            image: "s23107/2020/04/26/ea8fc439fddf2f62e3.jpg",
            num: 1,
            price: 32,
            membership_price: 0,
          },
        ],
        stall_code: "",
        sort: 2,
        price: 32,
        unit: "件",
        imageArr: [
          "https://img1.baidu.com/it/u=1047945906,2612051836&fm=253&fmt=auto&app=138&f=JPEG?w=813&h=500",
        ],
        membership_price: 0,
        use_property: 1,
        unit_type: 0,
        min_buy_num: 0,
        specs: [],
        content: "霸气杨梅和酸奶的首次搭配,甘甜可口",
        use_spec: false,
        stock: "999950.00",
        type: 1,
        is_label: 0,
        name: "霸气酸奶杨梅",
        images:
          "https://img1.baidu.com/it/u=1047945906,2612051836&fm=253&fmt=auto&app=138&f=JPEG?w=813&h=500",
      },
    ],
    name: "新品推荐",
    is_show_backstage: 0,
  },
]);
const data = reactive({
  scrollTop: 0, //tab标题的滚动条位置
  oldScrollTop: 0,
  current: 0, // 预设当前项的值
  menuHeight: 0, // 左边菜单的高度
  menuItemHeight: 0, // 左边菜单item的高度
  itemId: "", // 栏目右边scroll-view用于滚动的id
  //tabbar: classifyData,
  menuItemPos: [],
  arr: [],
  scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
  timer: null, // 定时器
  cart: [{ name: "珍珠奶茶" }],
  cartPopupVisible: false,
  goodDetailModalVisible: false,
  store: {},
  good: {
    name: "珍珠奶茶",
    price: 0.1,
    property: [
      {
        is_open_checkbox: false,
        id: 190,
        values: [
          {
            is_default: 1,
            id: 582,
            code: "Z5EA54C3D0E4279185",
            value: "标准冰",
          },
          {
            is_default: 0,
            id: 583,
            code: "Z5EA54C3D0E9682750",
            value: "去冰",
          },
        ],
        name: "温度",
        desc: null,
      },
      {
        is_open_checkbox: false,
        id: 191,
        values: [
          {
            is_default: 1,
            id: 585,
            code: "Z5EA54C3D0F2A37322",
            value: "标准糖",
          },
          {
            is_default: 0,
            id: 586,
            code: "Z5EA54C3D0F70A1000",
            value: "少糖",
          },
          {
            is_default: 0,
            id: 1959,
            code: "Z5EA54C3D0FAFE7320",
            value: "不另外加糖",
          },
        ],
        name: "糖度",
        desc: null,
      },
    ],
  },
  address: {},
});
const {
  scrollTop,
  oldScrollTop,
  current,
  menuHeight,
  menuItemHeight,
  itemId,
  menuItemPos,
  arr,
  scrollRightTop,
  goodDetailModalVisible,
  cartPopupVisible,
  timer,
  good,
  address,
  store,
} = toRefs(data);
// 点击左边的栏目切换
const swichMenu = async (index) => {
  if (arr.value.length == 0) {
    await getMenuItemTop();
  }
  if (index == current.value) return;
  scrollRightTop.value = oldScrollTop.value;
  nextTick(function () {
    scrollRightTop.value = arr.value[index];
    current.value = index;
    leftMenuStatus(index);
  });
};
// 			// 获取一个目标元素的高度
const getElRect = (elClass, dataVal) => {
  new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery().in(this);
    query
      .select("." + elClass)
      .fields(
        {
          size: true,
        },
        (res) => {
          // 如果节点尚未生成，res值为null，循环调用执行
          if (!res) {
            setTimeout(() => {
              getElRect(elClass);
            }, 10);
            return;
          }
          [dataVal].value = res.height;
          resolve();
        }
      )
      .exec();
  });
};
// 			// 观测元素相交状态
const observer = async () => {
  tabbar.value.map((val, index) => {
    let observer = uni.createIntersectionObserver(this);
    // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
    // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
    observer
      .relativeTo(".right-box", {
        top: 0,
      })
      .observe("#item" + index, (res) => {
        if (res.intersectionRatio > 0) {
          let id = res.id.substring(4);
          leftMenuStatus(id);
        }
      });
  });
};
// 			// 设置左边菜单的滚动状态
const leftMenuStatus = async (index) => {
  current.value = index;
  // 如果为0，意味着尚未初始化
  if (menuHeight.value == 0 || menuItemHeight.value == 0) {
    await getElRect("menu-scroll-view", "menuHeight");
    await getElRect("u-tab-item", "menuItemHeight");
  }
  // 将菜单活动item垂直居中
  scrollTop.value =
    index * menuItemHeight.value +
    menuItemHeight.value / 2 -
    menuHeight.value / 2;
};
// 			// 获取右边菜单每个item到顶部的距离
const getMenuItemTop = () => {
  new Promise((resolve) => {
    let selectorQuery = uni.createSelectorQuery();
    selectorQuery
      .selectAll(".class-item")
      .boundingClientRect((rects) => {
        // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
        if (!rects.length) {
          setTimeout(() => {
            getMenuItemTop();
          }, 10);
          return;
        }
        rects.forEach((rect) => {
          // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
          arr.value.push(rect.top - rects[0].top);
          resolve();
        });
      })
      .exec();
  });
};
// 			// 右边菜单滚动
const rightScroll = async (e) => {
  oldScrollTop.value = e.detail.scrollTop;
  if (arr.value.length == 0) {
    await getMenuItemTop();
  }
  if (timer.value) return;
  if (!menuHeight.value) {
    await getElRect("menu-scroll-view", "menuHeight");
  }
  setTimeout(() => {
    // 节流
    timer.value = null;
    // scrollHeight为右边菜单垂直中点位置
    let scrollHeight = e.detail.scrollTop + menuHeight.value / 2;
    for (let i = 0; i < arr.value.length; i++) {
      let height1 = arr.value[i];
      let height2 = arr.value[i + 1];
      // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
      if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
        leftMenuStatus(i);
        return;
      }
    }
  }, 10);
};

const showGoodDetailModal = (item: any, good: { value: any }) => {
  good.value = JSON.parse(JSON.stringify({ ...good, number: 1 }));
  //category.value = JSON.parse(JSON.stringify(item))
  goodDetailModalVisible.value = true;
};

const closeGoodDetailModal = () => {
  //关闭饮品详情模态框
  goodDetailModalVisible.value = false;
  //category.value = {}
  //good.value = {}
};
const handlePropertyAdd = () => {
  good.number.value += 1;
};
const handlePropertyReduce = () => {
  if (good.number.value === 1) return;
  good.number.value -= 1;
};

const changePropertyDefault = (index, key) => {
  //改变默认属性值
  good.property[index].values.forEach((value) =>
    this.$set(value, "is_default", 0)
  );
  good.property[index].values[key].is_default = 1;
  good.number = 1;
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
// .u-wrap {
// 	height: calc(100vh);
// 	/* #ifdef H5 */
// 	height: calc(100vh - var(--window-top));
// 	/* #endif */
// 	display: flex;
// 	flex-direction: column;
// }

// .u-search-box {
// 	padding: 18rpx 30rpx;
// }

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

// .u-search-inner {
// 	background-color: rgb(234, 234, 234);
// 	border-radius: 100rpx;
// 	display: flex;
// 	align-items: center;
// 	padding: 10rpx 16rpx;
// }

// .u-search-text {
// 	font-size: 26rpx;
// 	color: $u-tips-color;
// 	margin-left: 10rpx;
// }

.u-tab-view {
  width: 200rpx;
  height: 100%;
}

.u-tab-item {
  height: 110rpx;
  background: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #444;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #000;
  font-size: 30rpx;
  font-weight: 600;
  background: #fff;
}

.u-tab-item-active::before {
  content: "";
  position: absolute;
  border-left: 4px solid $u-warning;
  height: 32rpx;
  left: 0;
  top: 39rpx;
}

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

// .page-view {
// 	padding: 16rpx;
// }

.class-item {
  //margin-bottom: 30rpx;
  background-color: #fff;
  //padding: 16rpx;
  border-radius: 8rpx;
}

.class-item:last-child {
  min-height: 100vh;
}

.item-title {
  font-size: 26rpx;
  color: $u-main-color;
  font-weight: bold;
}

.item-menu-name {
  font-weight: normal;
  font-size: 24rpx;
  color: $u-main-color;
}

// .item-container {
// 	display: flex;
// 	flex-wrap: wrap;
// }

// .thumb-box {
// 	width: 33.333333%;
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;
// 	flex-direction: column;
// 	margin-top: 20rpx;
// }

.item-menu-image {
  width: 120rpx;
  height: 120rpx;
}

/* #ifdef H5 */
// page {
// 	min-height: 100%;
// }
// /* #endif */

.container {
  overflow: hidden;
  position: relative;
}

// .loading {
// 	width: 100%;
// 	height: 100%;
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;

// 	image {
// 		width: 260rpx;
// 		height: 260rpx;
// 		position: relative;
// 		margin-top: -200rpx;
// 		/* #ifdef h5 */
// 		margin-top: 0;
// 		/* #endif */
// 	}
// }

.stores {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: -40rpx;

  .store {
    width: 100%;
    background-color: $uni-bg-color-grey;
    padding: 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    border-radius: 6rpx;

    .iconfont {
      font-size: 50rpx;
      margin-right: 15rpx;

      &.iconradio-button-off {
        // color: $uni-text-color;
      }

      &.iconradio-button-on {
        // color: $uni-color-primary;
      }
    }

    .infos {
      flex: 1;
      display: flex;
      flex-direction: column;
      color: $uni-text-color;
      overflow: hidden;

      .name_and_distance {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
        overflow: hidden;

        .name {
          flex: 1;
          flex-shrink: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: $uni-font-size-lg;
        }

        .distance {
          flex-shrink: 0;
          font-size: $uni-font-size-lg;
          font-weight: bold;
          margin-left: 20rpx;
        }
      }

      .street {
        color: $uni-text-color;
        font-size: $uni-font-size-sm;
      }
    }
  }
}

.main {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.nav {
  width: 100%;
  height: 212rpx;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    background-color: #ffffff;
    height: 140rpx;

    .left {
      flex: 1;
      display: flex;
      flex-direction: column;

      .store-name {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: $uni-font-size-lg;
        margin-bottom: 10rpx;

        .iconfont {
          margin-left: 10rpx;
          line-height: 100%;
        }
      }

      .store-location {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: $uni-text-color;
        font-size: $uni-font-size-sm;

        .iconfont {
          vertical-align: middle;
          display: table-cell;
          color: $uni-color-primary;
          line-height: 100%;
        }
      }
    }

    .right {
      background-color: $uni-bg-color-grey;
      border-radius: 38rpx;
      display: flex;
      align-items: center;
      font-size: $uni-font-size-sm;
      padding: 0 38rpx;
      color: $uni-text-color;

      .dinein,
      .takeout {
        position: relative;
        display: flex;
        align-items: center;

        &.active {
          padding: 14rpx 38rpx;
          color: #ffffff;
          background-color: $uni-color-warning;
          border-radius: 38rpx;
        }
      }

      .takeout {
        margin-left: 20rpx;
        height: 100%;
        flex: 1;
        padding: 14rpx 0;
      }

      .dinein.active {
        margin-left: -38rpx;
      }

      .takeout.active {
        margin-right: -38rpx;
      }
    }
  }

  .coupon {
    flex: 1;
    width: 100%;
    background-color: #f9e8d2;
    //font-size: $uni-font-size-base;
    color: $uni-color-warning;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    overflow: hidden;

    .title {
      flex: 1;
      margin-left: 10rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .iconfont {
      line-height: 100%;
    }
  }
}

.content {
  flex: 1;
  overflow: hidden;
  width: 100%;
  display: flex;
  min-height: 100vh;
  //background-color: rebeccapurple;

  .menus {
    width: 200rpx;
    height: 100%;
    overflow: hidden;
    background-color: $uni-bg-color-grey;

    .wrapper {
      width: 100%;
      height: 100%;

      .menu {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 30rpx 20rpx;
        font-size: 26rpx;
        color: $uni-text-color;
        position: relative;

        &:nth-last-child(1) {
          margin-bottom: 130rpx;
        }

        &.current {
          background-color: #ffffff;
          color: $uni-text-color;
        }

        .dot {
          position: absolute;
          width: 34rpx;
          height: 34rpx;
          line-height: 34rpx;
          font-size: 22rpx;
          background-color: $uni-color-primary;
          color: #ffffff;
          top: 16rpx;
          right: 10rpx;
          border-radius: 100%;
          text-align: center;
        }
      }
    }
  }

  .goods {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;

    .wrapper {
      width: 100%;
      height: 100%;
      padding: 20rpx;

      .ads {
        height: calc(300 / 550 * 510rpx);

        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }

      .list {
        width: 100%;
        //font-size: $uni-font-size-base;
        padding-bottom: 130rpx;

        .category {
          width: 100%;

          .title {
            padding: 30rpx 0;
            display: flex;
            align-items: center;
            color: $uni-text-color;

            .icon {
              width: 38rpx;
              height: 38rpx;
              margin-left: 10rpx;
            }
          }
        }

        .items {
          display: flex;
          flex-direction: column;
          padding-bottom: -30rpx;

          .good {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;

            .image {
              width: 160rpx;
              height: 160rpx;
              margin-right: 20rpx;
              border-radius: 8rpx;
            }

            .right {
              flex: 1;
              height: 160rpx;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-between;
              padding-right: 14rpx;

              .name {
                // font-size: $uni-font-size-base;
                margin-bottom: 10rpx;
              }

              .tips {
                width: 100%;
                height: 40rpx;
                line-height: 40rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: $uni-font-size-sm;
                color: $uni-text-color;
                margin-bottom: 10rpx;
              }

              .price_and_action {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .price {
                  //font-size: $uni-font-size-base;
                  font-weight: 600;
                }

                .btn-group {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  position: relative;

                  .btn {
                    padding: 0 20rpx;
                    box-sizing: border-box;
                    font-size: $uni-font-size-sm;
                    height: 44rpx;
                    line-height: 44rpx;

                    &.property_btn {
                      border-radius: 24rpx;
                    }

                    &.add_btn,
                    &.reduce_btn {
                      padding: 0;
                      //width: 44rpx;
                      border-radius: 44rpx;
                    }
                  }

                  .dot {
                    position: absolute;
                    background-color: #ffffff;
                    border: 1px solid $uni-color-primary;
                    color: $uni-color-primary;
                    font-size: $uni-font-size-sm;
                    width: 36rpx;
                    height: 36rpx;
                    line-height: 36rpx;
                    text-align: center;
                    border-radius: 100%;
                    right: -12rpx;
                    top: -10rpx;
                  }

                  .number {
                    width: 44rpx;
                    height: 44rpx;
                    line-height: 44rpx;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.cart-box {
  position: fixed;
  bottom: 130rpx;
  left: 30rpx;
  right: 30rpx;
  height: 96rpx;
  z-index: 10002200;
  border-radius: 48rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .cart-img {
    width: 96rpx;
    height: 96rpx;
    position: relative;
    margin-top: -48rpx;
  }

  .pay-btn {
    max-width: 200rpx;
    height: 100%;
    padding: 0 30rpx;
    color: #ffffff;
    border-radius: 0 50rpx 50rpx 0;
    display: flex;
    align-items: center;
    //	font-size: $font-size-base;
  }

  .mark {
    padding-left: 46rpx;
    margin-right: 30rpx;
    position: relative;

    .tag {
      background-color: $uni-color-warning;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      //	font-size: $font-size-sm;
      position: absolute;
      right: -10rpx;
      top: -20rpx;
      border-radius: 100%;
      padding: 4rpx;
      width: 40rpx;
      height: 40rpx;
      opacity: 0.9;
    }
  }

  .price {
    flex: 1;
    //color: $text-color-base;
  }
}

// .modal-box {
// 	max-height: 90vh;
// }

.good-detail-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .modal-content {
    width: 100%;
    flex-direction: column;
  }

  .cover {
    width: 100%;
    height: 320rpx;
    padding: 30rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .image {
      width: 260rpx;
      height: 260rpx;
    }

    .btn-group {
      position: absolute;
      right: 10rpx;
      top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;

      image {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }

  .detail {
    width: 100%;
    min-height: 1vh;
    max-height: calc(90vh - 320rpx - 80rpx - 120rpx);
    .wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .basic {
        padding: 0 20rpx 30rpx;
        display: flex;
        flex-direction: column;
        .name {
          font-size: $uni-font-size-base;
          color: $uni-text-color;
          margin-bottom: 10rpx;
        }
        .tips {
          font-size: $uni-font-size-sm;
          color: $uni-text-color-grey;
        }
      }

      .properties {
        width: 100%;
        //border-top: 2rpx solid $uni-bg-color-grey;
        padding: 10rpx 30rpx 0;
        display: flex;
        flex-direction: column;

        .property {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-bottom: 30rpx;
          padding-bottom: -16rpx;

          .title {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20rpx;

            .name {
              font-size: 26rpx;
              //color: $uni-text-color;
              margin-right: 20rpx;
            }

            .desc {
              flex: 1;
              //font-size: $font-size-sm;
              //color: $uni-color-primary;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .values {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .value {
              border-radius: 8rpx;
              background-color: $uni-bg-color-grey;
              padding: 16rpx 30rpx;
              font-size: 26rpx;
              //	color: $uni-text-color-assist;
              margin-right: 16rpx;
              margin-bottom: 16rpx;

              &.default {
                background-color: $uni-color-warning;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }

  .action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $uni-bg-color-grey;
    height: 120rpx;
    padding: 0 26rpx;

    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 20rpx;
      // overflow: hidden;

      .price {
        //font-size: $uni-font-size-lg;
        color: $uni-text-color;
      }

      .props {
        color: $uni-text-color;
        font-size: 24rpx;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .btn-group {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .number {
        //font-size: $uni-font-size;
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
      }

      .btn {
        padding: 0;
        //font-size: $uni-font-size;
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        border-radius: 100%;
      }
    }
  }

  .add-to-cart-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $uni-color-primary;
    //color: $uni-text-color-white;
    font-size: $uni-font-size-base;
    height: 80rpx;
    border-radius: 0 0 12rpx 12rpx;
  }
}

// .cart-box {
// 	position: absolute;
// 	bottom: 30rpx;
// 	left: 30rpx;
// 	right: 30rpx;
// 	height: 96rpx;
// 	border-radius: 48rpx;
// 	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
// 	background-color: #FFFFFF;
// 	display: flex;
// 	align-items: center;
// 	justify-content: space-between;
// 	z-index: 9999;

// 	.cart-img {
// 		width: 96rpx;
// 		height: 96rpx;
// 		position: relative;
// 		margin-top: -48rpx;
// 	}

// 	.pay-btn {
// 		height: 100%;
// 		padding: 0 30rpx;
// 		color: #FFFFFF;
// 		border-radius: 0 50rpx 50rpx 0;
// 		display: flex;
// 		align-items: center;
// 		font-size: $uni-font-size-base;
// 	}

// 	.mark {
// 		padding-left: 46rpx;
// 		margin-right: 30rpx;
// 		position: relative;

// 		.tag {
// 			background-color: $uni-color-warning;
// 			color: $uni-text-color-white;
// 			display: flex;
// 			justify-content: center;
// 			align-items: center;
// 			font-size: $uni-font-size-sm;
// 			position: absolute;
// 			right: -10rpx;
// 			top: -50rpx;
// 			border-radius: 100%;
// 			padding: 4rpx;
// 			width: 40rpx;
// 			height: 40rpx;
// 			opacity: .9;
// 		}
// 	}

// 	.price {
// 		flex: 1;
// 		color: $uni-text-color-base;
// 	}
// }

.cart-popup {
  .top {
    background-color: $uni-color-warning;
    color: $uni-color-warning;
    padding: 10rpx 30rpx;
    font-size: 24rpx;
    text-align: right;
  }
  .cart-list {
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
    min-height: 1vh;
    max-height: 60vh;

    .wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 30rpx;
      margin-bottom: 156rpx;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        position: relative;

        &::after {
          content: " ";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: $uni-border-color;
          height: 2rpx;
          transform: scaleY(0.6);
        }

        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          margin-right: 30rpx;

          .name {
            font-size: $uni-font-size-sm;
            //	color: $uni-text-color-base;
          }
          .props {
            //	color: $uni-text-color-assist;
            font-size: 24rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .center {
          margin-right: 120rpx;
          //font-size: $uni-font-size-base;
        }

        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .btn {
            width: 46rpx;
            height: 46rpx;
            border-radius: 100%;
            padding: 0;
            text-align: center;
            line-height: 46rpx;
          }
          .active-btn {
            background: #f0ad4e;
          }
          .no-active-btn {
            border: 2rpx solid #ddd;
          }
          .number {
            //font-size: $uni-font-size-base;
            width: 46rpx;
            height: 46rpx;
            text-align: center;
            line-height: 46rpx;
          }
        }
      }
    }
  }
}
</style>
